<template>
  <view>
    <view v-for="(oItem, oIndex) in optionsData" :key="oIndex" class="tree-item">
      <view class="item" :style="{ paddingLeft: (itemNum * 24) + 'rpx' }">
        <uni-icons
          v-if="chooseData[item.key] === oItem.value"
          class="circle-icon"
          type="circle-filled"
          size="22"
          color="#115BAA"
          @click="clickSelectItem(oItem)"
        ></uni-icons>
        <uni-icons
          v-else
          class="circle-icon"
          type="circle"
          size="22"
          @click="clickSelectItem(oItem)"
        ></uni-icons>
        <view class="label">{{ oItem.label }}</view>
        <uni-icons
          v-if="oItem.children && oItem.children.length"
          class="down-icon"
          type="down"
          size="14"
        ></uni-icons>
      </view>
      <view v-if="oItem.children && oItem.children.length">
        <!-- <view style="opacity: 0; height: 0;">{{ getChildData() }}</view> -->
        <tree-item
          :item="item"
          :options="oItem.children"
          :chooseMoreForm="chooseData"
          :itemNum="itemNum + 1"
          @clickSelectItem="clickSelectChild"
        ></tree-item>
      </view>
    </view>
  </view>
</template>

<script>
  import TreeItem from './treeItem'
  export default {
    name: 'TreeItem',
    components: { TreeItem },
    data() {
      return {
        optionsData: [],
        chooseData: {},
        childData: 0,
        itemPaddingNum: 0
      }
    },
    props: {
      item: {
        type: Object,
        default: {}
      },
      options: {
        type: Array,
        default: []
      },
      itemNum: {
        type: Number,
        default: 0
      },
      chooseMoreForm: {
        type: Object,
        default: {}
      }
    },
    watch: {
      options: {
        handler(newVal, oldVal) {
          this.optionsData = uni.$u.deepClone(newVal)
        },
        deep: true
      },
      chooseMoreForm: {
        handler(newVal, oldVal) {
          this.chooseData = uni.$u.deepClone(newVal)
        },
        deep: true
      }
    },
    created() {
      this.chooseData = uni.$u.deepClone(this.chooseMoreForm)
      this.optionsData = uni.$u.deepClone(this.options)
    },
    methods: {
      clickSelectItem(oItem) {
        this.$emit('clickSelectItem', this.item, oItem)
      },
      clickSelectChild(item, oItem) {
        this.$emit('clickSelectItem', item, oItem)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .tree-item {
    width: 100%;
    .item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 0 12rpx 0;
      .circle-icon {
        margin-right: 4rpx;
      }
      .label {
        text-align: left;
        line-height: 32rpx;
      }
      .down-icon {
        margin-left: 10rpx;
      }
    }
  }
</style>